<template>
    <div class="app-container">

        <el-form
            ref="queryParamsRef"
            :inline="true"
            :model="queryParams"
            label-position="left"
            label-width="auto"
        >
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-row :gutter="24">
                        <el-col :span="15">
                            <el-form-item label="接待单位：" label-width="82" prop="unitId" style="width: 100%">
                                <DepartmentCascader v-model="queryParams.unitId" @change="getTableData"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="含下级：" label-width="72">
                                <el-tooltip content="是否包含下级单位">
                                    <el-switch v-model="childUnitId" :disabled="!queryParams.unitId"
                                               @change="childUnitIdSearchHandle"/>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="接待警务区：" prop="policeAreaId" style="width: 100%">
                        <PoliceAreaManageSelect
                            v-model="queryParams.policeAreaId"
                            :isChooseOne="false"
                            areatype=""
                            @change="getTableData"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="执勤法警：" prop="userName">
                        <el-input v-model="queryParams.userName" placeholder="请输入执勤法警" @change="getTableData"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="接待时间：" style="width: 100%">
                        <el-date-picker
                            v-model="searchTime"
                            end-placeholder="截止时间"
                            range-separator="-"
                            start-placeholder="开始时间"
                            type="daterange"
                            unlink-panels
                            value-format="YYYY-MM-DD"
                            @change="changeDateTimerHandle"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="来访人姓名：" prop="name" style="width: 100%">
                        <el-input v-model="queryParams.name" placeholder="请输入来访人姓名" @change="getTableData"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="来访人性别：" prop="sex" style="width: 100%">
                        <el-select
                            v-model="queryParams.sex"
                            clearable
                            placeholder="选择来访人性别"
                            @change="getTableData"
                        >
                            <el-option
                                v-for="item in nj_sex"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="来访人身份证：" prop="sfzId" style="width: 100%">
                        <el-input v-model="queryParams.sfzId" placeholder="请输入来访人身份证" @change="getTableData"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="安检情况：" prop="checkInfo" style="width: 100%">
                        <el-input v-model="queryParams.checkInfo" placeholder="请输安检情况" @change="getTableData"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="信访情况：" prop="checkInInfo" style="width: 100%;">
                        <el-input v-model="queryParams.checkInInfo" placeholder="请输入信访情况"
                                  @change="getTableData"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="关注级别：" prop="alertLever" style="width: 100%;">
                        <el-select
                            v-model="queryParams.alertLever"
                            clearable
                            placeholder="选择关注级别"
                            @change="getTableData"
                        >
                            <el-option
                                v-for="item in nj_laifang_color"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" @click="getTableData">
                            <el-icon class="me-1">
                                <Search/>
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh/>
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="exportHandleXlsx('控申接待统计列表')">
                            <el-icon class="me-1">
                                <Download/>
                            </el-icon>
                            导出
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
            </el-row>
        </el-form>

        <el-table
            ref="tableDataRef"
            v-loading="loading"
            :data="tableData"
            :default-sort="defaultSort"
            border
            stripe
            :row-style="tableRowStyle"
            show-overflow-tooltip
            @sort-change="handleSortChange"
            @row-dblclick="handleDbClick"
        >
            <el-table-column type="index" width="50"/>
            <el-table-column :sort-orders="['descending', 'ascending']" label="接待单位" prop="UnitName"
                             sortable="UnitName"/>
            <el-table-column :sort-orders="['descending', 'ascending']" label="接待警务区" prop="areaname"
                             sortable="areaname"/>
            <el-table-column :sort-orders="['descending', 'ascending']" label="执勤法警" prop="userName"
                             sortable="userName"/>
            <el-table-column :sort-orders="['descending', 'ascending']" label="接待时间" prop="checkInTime"
                             sortable="checkInTime"/>
            <el-table-column :sort-orders="['descending', 'ascending']" label="来访人姓名" prop="name" sortable="name"/>
            <el-table-column :sort-orders="['descending', 'ascending']" label="来访人性别" prop="sexName"
                             sortable="sexName"/>
            <el-table-column :sort-orders="['descending', 'ascending']" label="来访人身份证" prop="sfzId"
                             sortable="sfzId"/>
            <el-table-column label="安检情况" prop="checkinfo"/>
            <el-table-column label="信访情况" prop="checkininfo"/>
            <el-table-column :sort-orders="['descending', 'ascending']" label="关注级别" prop="alertleverName"
                             sortable="alertleverName"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link size="small" type="primary"
                               @click="registerVisitReviewRef.showVisitDetail(scope.row.jw_checkinlogin_id)">详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            v-model:limit="paging.pageSize"
            v-model:page="paging.pageNum"
            :total="total"
            @pagination="getTableData"
        />
    </div>
    <RegisterVisitReview ref="registerVisitReviewRef"/>
</template>

<script setup>

import {useTemplateRef} from 'vue';
import DepartmentCascader from '@/components/DepartmentCascader/DepartmentCascader.vue';
import {getCheckInLogTableList} from '@/api/StatisticAnalysis/CheckInLogin.js';
import PoliceAreaManageSelect from '@/components/PoliceAreaManageSelect/PoliceAreaManageSelect.vue';
import {exportHandleXlsx} from '@/utils/export.js';
import {Download} from '@element-plus/icons-vue';
import PageEnum from '@/enum/PageEnum.js';
import RegisterVisitReview from '@/views/PoliceWork/RegistVisit/components/RegisterVisitReview.vue';

const queryParamsRef = useTemplateRef('queryParamsRef');
const registerVisitReviewRef = useTemplateRef('registerVisitReviewRef');
const tableDataRef = useTemplateRef('tableDataRef');

const searchTime = ref([]);
const childUnitId = ref(false)
const queryParams = ref({
    // 单位
    unitId: '',
    // 含下级单位
    childUnitId: '',
    // 警务区
    policeAreaId: '',
    // 执勤法警
    userName: '',
    // 来访人姓名
    name: '',
    // 来访人性别
    sex: '',
    // 身份证
    sfzId: '',
    // 安检情况
    checkInfo: '',
    // 信访情况
    checkInInfo: '',
    // 关注级别
    alertLever: '',
    // selChildren: false,
    params: {
        beginTime: '',
        endTime: ''
    }
});

const {proxy} = getCurrentInstance()
const {
    nj_sex,
    nj_laifang_color
} = proxy.useDict('nj_sex', 'nj_laifang_color')

const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE,
    isAsc: 'descending',
    orderByColumn: 'checkInTime'
})
const defaultSort = ref({prop: 'UnitName', order: 'descending'});
const tableData = ref([]);

onMounted(() => {
    getTableData()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
const childUnitIdSearchHandle = (e) => {
    queryParams.value.childUnitId = e ? queryParams.value.unitId : '';
    getTableData()
}

const getTableData = async () => {
    loading.value = true;
    const res = await getCheckInLogTableList(queryParams.value, paging.value);
    total.value = res.total;
    tableData.value = res.rows
    loading.value = false;
}

// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }

    getTableData()
}
/** 排序触发事件 */
const handleSortChange = (column, prop, order) => {
    paging.value.orderByColumn = column.prop;
    paging.value.isAsc = column.order;
    getTableData();
}
// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = '';
    queryParams.value.params.endTime = '';
    queryParams.value.selChildren = false;

    tableDataRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
    await getTableData()
}

const handleDbClick = (row) => {
    registerVisitReviewRef.value.showVisitDetail(row.jw_checkinlogin_id)
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

</style>